<!--container-fluid-->
<div class="customContainer">
    <!--<ng-include src="'modules/common/top-nav.html'"></ng-include>-->
    <ng-include src="'modules/common/loading.html'"></ng-include>
    <div ng-show="loaded" class="body-content-body">
        <div ng-if="error" style="text-align:center;margin-top:40%;font-size: 16px;">{{errorMessage}}</div>
        <div ng-if="!error">
            <div class="article">
                <div class="article-header row">
                    <div class="col-sm-12" style="padding:0;text-align: left;margin-bottom: 5px;">
                        <h2>{{article.title}}</h2>
                    </div>
                </div>
                <div class="article-body">
                    <div class="row">
                        <div class="col-sm-12 summary">
                            <div class="row" style="font-family: '微软雅黑';color:#9B9B9B;font-size: 13px;padding-top: 5px">
                                <span class="glyphicon glyphicon-th-list"></span>
                                <a style="" href="#!/blog/category/{{article.categoryCode}}">{{article.categoryName}}</a>
                                <span ng-if="article.tagNames"
                                      class="glyphicon glyphicon-tags  hidden-sm hidden-xs"></span>
                            <span ng-repeat="tName in article.tagNames" class="hidden-sm hidden-xs">
                                <a href="#!/blog/tag/{{tName}}">
                                    <span> {{tName}} </span>
                                </a>
							</span>
                            <span class="pull-right">
                                <span class="glyphicon glyphicon-time"></span>
                                <a style="margin-right:5px" title="归档：{{article.pubTime | date :'yyyy-MM'}}"
                                   href="#!/blog/archive/{{article.pubTime | date :'yyyy-MM'}}">
                                    {{article.pubTime | date :'yyyy-MM-dd HH:ss'}}</a>
                                <span class="glyphicon glyphicon-eye-open"></span>
                                <span style="margin-right:5px">阅读({{article.hits}})</span>
                                <span class="glyphicon glyphicon-comment"></span>
                                <span>评论({{article.countMessages}})</span>
                            </span>
                            </div>
                        </div>
                        <!--<div class="col-sm-12 summary">

                            <div class="row">
                                <div class="col-md-6" style="padding:0;">
                                    <span style="font-family: '楷体'">类别：</span> <span><a
                                        style="text-decoration: underline;"
                                        href="#!/blog/category/{{article.categoryName}}">{{article.categoryName}}</a></span>
                                </div>
                                <div class="col-md-6" style="padding:0;">
                                    <span style="font-family: '楷体'">标签：</span> <span
                                        ng-repeat="tName in article.tagNames"> <a
                                        href="#!/blog/tag/{{tName}}"><span
                                        style="text-decoration: underline;" class="tag">
												{{tName}} </span></a>
									</span>
                                </div>
                                <div class="col-sm-12" style="margin-bottom: 0px;padding:0;">
                                    <p style="font-family: '楷体';margin-bottom: 0px">摘要：</p>

                                    <p style="text-indent: 30px;margin-bottom: 0px">{{article.summary}}</p>

                                    <p style="text-align:right;font-family: '楷体';margin-bottom: 0px">
                                        发表于 <a style="text-decoration: underline;"
                                               title="归档：{{article.pubTime | date :'yyyy-MM'}}"
                                               href="#!/blog/archive/{{article.pubTime | date :'yyyy-MM'}}">{{article.pubTime
                                        | date :'yyyy-MM-dd HH:ss'}}</a>
                                    </p>
                                </div>
                            </div>
                        </div>-->
                        <div class="col-sm-12 content">
                            <div ng-bind-html="article.content | trusted"></div>
                        </div>
                        <div class="row visible-sm visible-xs">
                            <span style="float: left;">标签：</span><span ng-repeat="tName in article.tagNames"
                                                                       style="float: left">
                                <span class="glyphicon glyphicon-tag"></span>
                                <a href="#!/blog/tag/{{tName}}">
                                    <span> {{tName}} </span>
                                </a>&nbsp;
							</span>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row" style="padding:0;">
                <div class="col-sm-12 pre">
                    <span class="glyphicon glyphicon-arrow-up"></span>
                    <a ng-if="preArticle"
                       href="#!/blog/article/{{preArticle.code}}"><span>上一篇：</span>{{preArticle.title}}</a>
                    <span ng-if="!preArticle"><span>上一篇：</span>没有了...</span>
                </div>
                <div class="col-sm-12 next">
                    <span class="glyphicon glyphicon-arrow-down"></span>
                    <a ng-if="nextArticle"
                       href="#!/blog/article/{{nextArticle.code}}"><span>下一篇：</span>{{nextArticle.title}}</a>
                    <span ng-if="!nextArticle"><span>下一篇：</span>没有了...</span>
                </div>
            </div>
            <div class="message-list" id="message-list">
                <div class="row">
                    <div class="col-xs-12 message-body" style="margin: 0;">
                        <h3 id="message-body-top" style="padding-bottom: 10px;border-bottom: 2px silver solid;">
                                <span class="glyphicon btn-lg glyphicon-comment"
                                      style="padding: 3px 6px;"></span>留言<span style="color: #7E7E7E;font-size: 14px;"
                                                                               ng-if="messages">（{{messages.length}}条）</span>
                        </h3>

                        <p style="color: #7E7E7E;">注意：请慎重投出你的支持票，谢谢配合！^_^</p>

                        <div class="message-card" ng-repeat="msg in messages">
                                <span style="background-color: #52768E;padding: 8px 15px;height: 36px;line-height: 36px;color: #fff;text-shadow: 5px 5px 5px #3f5b6e;">
                                    <a ng-if="msg.guestWebsite" href="http://{{msg.guestWebsite}}" target="_blank"><span
                                            style="color:#fff;text-decoration: underline;">{{msg.guestNickname}}</span></a>
                                    <span ng-if="!msg.guestWebsite">{{msg.guestNickname}}</span>
                                </span>
                                <span class="pull-right" style="padding-right: 10px;">
                                    <span style="line-height: 32px;">{{msg.messageSupportCount}}</span>
                                    <a href="javascript:void(0)" style="margin-left:10px;" title="支持数"><span
                                            class="glyphicon btn-lg glyphicon-thumbs-up pull-right"
                                            style="padding: 2px 0 0 0;"></span></a>
                                </span>

                            <div style="padding: 10px 15px 5px 15px;">
                                <div ng-bind-html="msg.messageContent | trusted"></div>
                            </div>
                            <p class=""
                               style="color:#B9B9B9;margin:0 10px 4px 0;font-size: 10px;text-align: right;">发表于
                                {{msg.messagePubTime | date:'yyyy-MM-dd HH:mm'}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="message-new" id="message-new">
                <div class="row">
                    <div class="col-xs-12 message-header">
                        <h3 style="padding-bottom: 10px;border-bottom: 2px silver solid;">
                            发表您的看法</h3>

                        <form class="form-horizontal" name="messageForm" ng-submit="comment(guest)"
                              novalidate>
                            <div class="form-group">
                                <div class="row">
                                    <label>邮箱</label>
                                    <!--<span style="padding-left:20px;font-size: 12px;color:green;"
                                          ng-bind="emailValidInfo"
                                          ></span>-->
                                    <div><input placeholder="必填，放心我不会公开也不会发送广告" class="form-control" type="email"
                                                name="email" ng-model="guest.email"
                                                required/></div>
                                    <!-- ng-blur="getGuestInfoByEmail(guest.email)" -->
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <label>昵称</label><!--<span style="padding-left:20px;font-size: 12px;color:green;"
                                                           ng-bind="nicknameValidInfo"></span>-->
                                    <div><input placeholder="必填，您的大名" class="form-control" type="text"
                                                name="nickname" ng-model="guest.nickname"
                                                required/>
                                        <!--ng-blur="getGuestInfoByNickname(guest.email,guest.nickname)"-->
                                        <!--ng-disabled="!guest.email"-->
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <label>个人网址</label>

                                    <div><input placeholder="希望我们能够互相信任 ^_^" class="form-control"
                                                name="personalWebsite"
                                                ng-model="guest.personalWebsite" type="text"/></div>
                                    <!--ng-disabled="!guest.email"-->
                                </div>
                            </div>
                            <div class="form-group">
                                <label>观点</label>

                                <div class="col-sm-12" style="padding:0">
                                    <div id="message-editormd"
                                         style="margin-bottom: 0;width:100%;border-color: silver;">
                                        <textarea class="editormd-markdown-textarea"
                                                  name="$id-markdown-doc"></textarea>
                                        <!-- html textarea 需要开启配置项 saveHTMLToTextarea == true -->
                                        <!--<textarea class="editormd-html-textarea"
                                                  name="$id-html-code"></textarea>-->
                                    </div>
                                </div>
                            </div>
                            <button type="submit" ng-disabled="messageForm.$invalid" class="btn btn-primary"
                                    style="width: 100px;margin-top: 10px;">提 交
                            </button>
                            <span style="padding-left:20px;font-size: 12px;color:red;"
                                           ng-bind="contentValidInfo"></span>
                            <span style="line-height: 36px;color:green" ng-bind="resultMessage"></span>
                        </form>
                    </div>
                </div>
            </div>
            <div id="gomessages"><span title="查看留言" class="glyphicon glyphicon-comment"></span></div>
            <div id="gomessage"><span title="表达看法" class="glyphicon 	glyphicon glyphicon-edit"></span></div>
            <div id="gotop"><span title="回到顶部" class="glyphicon glyphicon-chevron-up"></span></div>

        </div>
    </div>
</div>

<script src="plugins/editor.md/editormd.js"></script>
<style>
    .editormd-dialog {
        width: 80%;
    }

    .editormd {
        padding-top: 6px;
    }

    /*    .CodeMirror, .cm-s-default, .CodeMirror-wrap, .CodeMirror-empty{
            width: 100%;
        }*/
    #gomessages, #gomessage, #gotop {
        position: fixed;
        right: 20px;
        padding: 5px 10px;
        font-size: 20px;
        background: #B7B7B7;
        color: white;
        cursor: pointer;
        z-index: 100;
    }

    #gotop {
        display: none;
        bottom: 112px;
    }

    #gomessages {
        bottom: 71px;
    }

    #gomessage {
        bottom: 30px;
    }

    #gotop:hover, #gomessage:hover, #gomessages:hover {
        background: #777;
    }
</style>